import React,{Component} from "react";

import "./index.css"

import Headcom from "../../components/header"
import Tip from "../../components/tip"
import {regUser} from "../../api/user";



class Index extends Component{
    constructor(props){
        super(props);
        this.state = {
        	tipmsg:"",
        	isShow:false,
        	username:"",
        	pass:"",
        	repass:""
        }
    }

    tipMsg(msg){
        this.setState({
    		tipmsg:msg,
    		isShow:true
    	},()=>{
    		setTimeout(()=>{
    		    this.setState({
    		    	isShow:false
    		    })
    		},2000)
    	})
    }
    
    regHanld(){
    	let {username,pass,repass} = this.state;
    	if(username.trim()===""){
    		this.tipMsg("请输入用户名");
    		return;
    	}
    	if(pass.trim()===""){
    		this.tipMsg("请输入密码");
    		return;
    	}

    	if(pass.trim().length<6 || pass.trim().length>16){
    		this.tipMsg("密码长度为6-16位,请重新输入");
    		return;
    	}

    	if(pass!==repass){
    		this.tipMsg("两次输入密码不一致");
    		return;
    	}

    	regUser({
    		username,
    		pass
    	}).then(res=>{
            //console.log(res)
            this.tipMsg(res.data.msg);
    	})


    }




	render(){
		let {tipmsg,isShow,username,pass,repass} = this.state;
		return(
            <div className="reg">
               <Headcom title="注册"/>
               <div className="form">
                    <p>
                      <input type="text" 
                             placeholder="请输入用户名" 
                             value={username} 
                             onChange={(ev)=>{this.setState({
                             	username:ev.target.value
                             })}}/>
                    </p>
                    <p><input type="password" 
                              placeholder="请输入密码"  
                              value={pass} 
                              onChange={(ev)=>{this.setState({
                              	pass:ev.target.value
                              })}}/></p>
                    <p><input type="password" 
                              placeholder="请再次输入密码" 
                              value={repass} 
                              onChange={(ev)=>{this.setState({
                              	  repass:ev.target.value
                              })}}/></p>
                    <span className="btn" onClick={this.regHanld.bind(this)}>注册</span>
               </div>
               <Tip top={8} tipmsg={tipmsg} isShow={isShow} />
            </div>
		)
	}
}


export default Index